<template>
  <div>
     <!-- 通用工具栏 -->
      <navSearch :formList="formList"  @btnSearch="btnSearch" ref="formList">
      </navSearch>
     <div class="statistical">
       <span class="total">发放总数量：{{sumGrant}}元</span>
       <span class="total">领取总金额：{{sumGet}}元</span>
      </div>
    <el-card>
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="店铺ID"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="storeName"
          label="店铺名称"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="couponName"
          label="优惠券名称"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="couponAmount"
          label="优惠劵金额/元"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="limit"
          label="使用金额限制"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="potLife"
          label="使用时限/天"
          width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="countNum"
          label="发放总数量/张"
          width="140"
          align="center">
        </el-table-column>
        <el-table-column
          prop="numAmount"
          label="领取金额/元"
          width="140"
          align="center">
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
        <!-- <el-row  type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
              class="paging"
              layout="prev, pager, next"
              >
            </el-pagination>
        </el-row> -->
    </el-card>
  </div>
</template>

<script>
import { getStoreCoupon } from '@/api/generalCoupon'
export default {
  data () {
    return {
      list: [],
      formList: { store: true, discount: true }
    }
  },
  created () {
    this.getStoreCoupon()
  },
  computed: {
    sumGrant () {
      return this.list.reduce((sum, value) => {
        return value.countNum + sum
      }, 0)
    },
    sumGet () {
      return this.list.reduce((sum, value) => {
        return value.numAmount + sum
      }, 0)
    }
  },
  methods: {
    async getStoreCoupon () {
      this.list = await getStoreCoupon()
      console.log(this.list)
    },
    btnSearch (formData) {
      const { store, discount } = formData
      if (store !== '') {
        this.list = this.list.filter(v => { return v.storeName === store })
      } else if (discount !== '') {
        this.list = this.list.filter(v => { return v.couponName === discount })
      } else {
        this.getStoreCoupon()
      }
      this.$refs.formList.btnReset()
    }

  }
}
</script>

<style scoped>
.paging{
  height: 10px;
}

thead{
  line-height: 40px;
}
.total{
  margin-right:100px;
}
.statistical{
  margin: 20px;
}
</style>
